<template>
  <page-cont :title="title" @onClickRight="clickSearch">
    <template #NavRight>
      <van-icon name="search" size="18" />
    </template>

    <van-search
      v-show="searchShow"
      v-model="searchKeyword"
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      @search="onSearch"
      @cancel="searchCancel"
    />

    <div class="video-list">
      <van-list :loading="loading" :finished="finished" @load="onLoad">
        <van-grid :border="false" :column-num="2">
          <van-grid-item
            v-for="item in videos"
            :key="item.id"
            :to="`/videoInfo?id=${item.id}&title=${item.name}`"
          >
            <template #icon>
              <AnImage :url="item.coverImage" />
            </template>
            <template #text>
              <div class="an-name">{{item.name}}</div>
              <!-- <div class="an-hang">
                <div>{{item.tags}}</div>
              </div>-->
            </template>
          </van-grid-item>
        </van-grid>
      </van-list>
    </div>
  </page-cont>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getVideoList } from "@/api/data";
import AnImage from "@/components/AnImage/index.vue";

const router = useRouter();
const route = useRoute();
// 路由接收参数 类型
const videoType = route.query.type;
const title = route.query.title || "列表";

const loading = ref(false);
const finished = ref(false);
const searchKeyword = ref("");
const searchShow = ref(false);
const videos = ref([]);
const total = ref(0);

const getDate = {
  page: 1,
  pageSize: 10,
};

const onLoad = () => {
  if (getDate.page == 1) {
    videos.value = [];
    finished.value = false;
  }
  loading.value = true;

  getVideoList({
    type: videoType,
    name: searchKeyword.value,
    page: getDate.page,
    pageSize: getDate.pageSize,
    status: 1,
  })
    .then((res) => {
      videos.value = [...videos.value, ...res.data];
      total.value = res.total;
      getDate.page++;
      if (getDate.page > Math.ceil(total.value / getDate.pageSize)) {
        finished.value = true;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const onSearch = () => {
  getDate.page = 1;
  finished.value = false;
  onLoad();
};

// 搜索
const clickSearch = () => {
  searchShow.value = true;
};

// 搜索取消
const searchCancel = () => {
  searchShow.value = false;
  searchKeyword.value = "";
  getDate.page = 1;
  finished.value = false;
  onLoad();
};

// 路由后退
const goBlack = () => {
  router.go(-1);
};
</script>

<style lang="less" scoped>
.video-list {
  width: 100%;
  height: 100%;
}
</style>